import { Component } from 'react';

import Log from "../../components/baidu/Logo"; //百度logo
import Search from "../../components/baidu/Search";//搜索
import HotList from "../../components/baidu/HotList";//列表

import Zi from "../../components/案例练习作业/1.自定义状态";
import Sj from "../../components/案例练习作业/2.事件处理函数更改this指向";
import Sf from "../../components/案例练习作业/3.受控和非受控组件";
import Fb from "../../components/案例练习作业/4.案例-发表评论";
import Form from "../../components/案例练习作业/5.表单";

class baidu extends Component {

  state = {
    list:[
      {
        id:1,
        name:'1. 开启新的奔赴'
      },
      {
        id:2,
        name:'2. 胡新宇家属:遗体在学校后山粮库..'
      },      {
        id:3,
        name:'3. 中疾控：中国本轮疫情已接近尾声'
      },      {
        id:4,
        name:'4. 人气足 市场旺 信心强'
      },      {
        id:5,
        name:'5. 胡新宇母亲：多人曾进粮库寻找过'
      },      {
        id:6,
        name:'6. 什么是 “缢吊”？'
      }
    ]
  }

  // 搜索
  sousuo = (e)=>{  //e是子组件传过来的
    console.log(e);
    this.state.list = this.state.list.filter(item => item.name.includes(e)) //includes是否包含子组件传过来的数据
    this.setState({
      list:this.state.list
    })
  }


  render() { 
    return ( 
      <>
        <div className='baidu'>
          {/* 百度logo */}
          <Log></Log>
          {/* 搜索区域 */}
          <Search sousuo={this.sousuo}></Search>
          {/* 列表区域 */}
          <HotList list={this.state.list}></HotList>

          {/* tadolist */}


          {/* 案例练习1 */}
          <Zi></Zi>
          {/* 案例练习2 */}
          <Sj></Sj>
          {/* 案例3 */}
          <Sf></Sf>
          {/* 案例4 */}
          <Fb></Fb><br /><br /><br /><br /><br /><br /><br /><br /><br />
          {/* 案例5 */}
          <Form></Form>
        </div>
      </>
     )
  }
}
 
export default baidu;